<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <hotel v-if="this.field === 'hotel' && this.detailData" :datas="this.detailData"></hotel>
      <food v-if="this.field === 'food' && this.detailData" :datas="this.detailData"></food>
      <view-detail v-if="this.field === 'view' && this.detailData" :datas="this.detailData"></view-detail>
      <massage-detail v-if="this.field === 'massage' && this.detailData" :datas="this.detailData"></massage-detail>
      <ktv-detail v-if="this.field === 'ktv' && this.detailData" :datas="this.detailData"></ktv-detail>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';
  import HotelDetail from './Detail/Hotel.vue';
  import FoodDetail from './Detail/Food.vue';
  import ViewDetail from './Detail/View.vue';
  import MassageDetail from './Detail/Massage.vue';
  import Ktv from './Detail/Ktv.vue';

  import {
    DetailModel
  } from 'models/detail.js';

  export default {
    name: 'DetailScrollWrapper',
    data: function() {
      return {
        field: '',
        id: 0,
        detailData: {}
      }
    },
    components: {
      'hotel': HotelDetail,
      'food': FoodDetail,
      'view-detail': ViewDetail,
      'massage-detail': MassageDetail,
      'ktv-detail': Ktv
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true,
      });
      this.field = this.$router.history.current.query.field;
      this.id = this.$router.history.current.query.id;
      this.getDetails(this.field, this.id);
    },
    methods: {
      getDetails(field, id) {
        const detailModel = new DetailModel();
        detailModel.getDetail(field, id).then((res) => {
          if (res && res.status === 0) {
            const data = res.data.data;
            data.pics && (data.pics = JSON.parse(data.pics));
            data.service && (data.service = JSON.parse(data.service));
            data.keyword && (data.keyword = data.keyword.split(','));
            this.detailData = data;
            data.comment_keyword && (data.comment_keyword = data.comment_keyword.split(','))
            console.log(this.detailData)
          } else {
            console.log({
              statusCode: res.status,
              errorMsg: res.error
            });
          }

        });
      }
    },
    activated() {
      this.currentField = this.$router.history.current.query.field;
      this.currentId = this.$router.history.current.query.id;
      if (this.currentField !== this.field || this.currentId !== this.id) {
        this.field = this.currentField;
        this.id = this.currentId;
        this.getDetails(this.field, this.id);
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
</style>
